<template>
	<view class="container">
	  <!-- 顶部品牌区 -->
	  <view class="brand-section">
		<view class="brand-content">
		  <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
		  <view class="slogan-box">
			<text class="title">创新价值</text>
			<text class="subtitle">投资分析工具</text>
		  </view>
		</view>
		
		<!-- 搜索框 -->
		<view class="search-bar">
		  <text class="iconfont icon-search"></text>
		  <input 
			class="search-input"
			v-model="searchKeyword"
			placeholder="输入股票代码/名称搜索"
			placeholder-class="placeholder"
			@input="onSearchInput"
		  />
		</view>
	  </view>
  
	  <!-- 热门搜索区 -->
	  <view class="content-section">
		<view class="section-header">
		  <text class="title">{{ searchKeyword ? '搜索结果' : '热门搜索' }}</text>
		</view>
		
		<view class="stock-list">
		  <view 
			class="stock-item"
			v-for="(item, index) in currentList" 
			:key="index"
			@tap="onStockClick(item)"
		  >
			<view class="stock-info">
			  <text class="name">{{ item.name }}</text>
			  <text class="code">{{ item.stock_code }}</text>
			</view>
			<view class="patent-info" v-if="item.patentCount > 0">
			  <text class="count">{{ item.patentCount }}</text>
			  <text class="label">项专利</text>
			</view>
		  </view>
		</view>
	  </view>
	</view>
  </template>
  
  <script>
  export default {
	data() {
	  return {
		hotList: [],
		searchList: [],
		searchKeyword: '',
		loading: false
	  }
	},
	
	computed: {
	  currentList() {
		return this.searchKeyword ? this.searchList : this.hotList
	  }
	},
	
	onLoad() {
	  this.getHotStocks()
	},
	
	methods: {
	  async getHotStocks() {
		console.log('================ 获取热门股票 ================')
		try {
		  this.loading = true
		  console.log('开始调用云函数...')
		  
		  const res = await uniCloud.callFunction({
			name: 'stock',
			data: {
			  action: 'getHotStocks'
			}
		  })
		  
		  console.log('云函数返回结果:', res)
		  
		  if(res.result.code === 200) {
			console.log('获取成功,数据:', res.result.data.list)
			this.hotList = res.result.data.list
		  } else {
			console.error('获取失败:', res.result.msg)
			uni.showToast({
			  title: res.result.msg,
			  icon: 'none'
			})
		  }
		  
		} catch(e) {
		  console.error('获取热门股票异常:', e)
		  uni.showToast({
			title: '获取数据失败',
			icon: 'none'
		  })
		} finally {
		  this.loading = false
		  console.log('==========================================')
		}
	  },
	  async onSearchInput(e) {
		console.log('================ 搜索股票 ================')
		try {
		  const keyword = e.detail.value
		  console.log('输入关键词:', keyword)
		  this.searchKeyword = keyword
		  
		  if(!keyword) {
			console.log('关键词为空,清空搜索结果')
			this.searchList = []
			return
		  }
		  
		  console.log('准备调用云函数...')
		  const res = await uniCloud.callFunction({
			name: 'stock',
			data: {
			  action: 'searchStocks',
			  params: {
				keyword: keyword
			  }
			}
		  })
		  
		  console.log('云函数返回结果:', res)
		  
		  if(res.result.code === 200) {
			console.log('搜索成功,结果:', res.result.data.list)
			this.searchList = res.result.data.list
		  } else {
			console.error('搜索失败:', res.result.msg)
		  }
		  
		} catch(e) {
		  console.error('搜索异常:', e)
		  uni.showToast({
			title: '搜索失败',
			icon: 'none'
		  })
		} finally {
		  console.log('==========================================')
		}
	  },
	  async onStockClick(item) {
		try {
		  // 检查是否有标准股票代码
		  if (!item.stock_code) {
			uni.showToast({
			  title: '股票代码格式错误',
			  icon: 'none'
			})
			return
		  }

		  uni.showLoading({
			title: '加载中...',
			mask: true
		  })

		  console.log('请求专利信息，股票代码:', item.stock_code) // 添加日志

		  const res = await uniCloud.callFunction({
			name: 'patent',
			data: {
			  action: 'getCompanyPatentInfo',
			  params: {
				stockCode: item.stock_code
			  }
			}
		  })

		  console.log('专利信息返回结果:', res) // 添加日志

		  if (res.result.code === 200) {
			uni.navigateTo({
			  url: `/pages/stock/detail?info=${encodeURIComponent(JSON.stringify(res.result.data))}`
			})
		  } else {
			uni.showToast({
			  title: res.result.msg,
			  icon: 'none'
			})
		  }

		} catch (e) {
		  console.error('获取详情异常:', e)
		  uni.showToast({
			title: '获取详情失败',
			icon: 'none'
		  })
		} finally {
		  uni.hideLoading()
		}
	  }
	}
  }
  </script>
  
  <style lang="scss">
  .container {
	min-height: 100vh;
	background: #f6f7f9;
  }
  
  .brand-section {
	background: #4080ff;
	padding: 40rpx 30rpx 50rpx;
	
	.brand-content {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  margin-bottom: 40rpx;
	  padding: 20rpx 0;
	  
	  .logo {
		width: 160rpx;
		height: 160rpx;
		margin-right: 24rpx;
	  }
	  
	  .slogan-box {
		background: #e4393c;
		padding: 16rpx 24rpx;
		border-radius: 12rpx;
		
		.title {
		  font-size: 48rpx;
		  font-weight: bold;
		  display: block;
		  margin-bottom: 8rpx;
		  letter-spacing: 2rpx;
		  color: #fff;
		}
		
		.subtitle {
		  font-size: 32rpx;
		  color: rgba(255, 255, 255, 0.9);
		}
	  }
	}
	
	.search-bar {
	  height: 88rpx;
	  background: #fff;
	  border-radius: 44rpx;
	  display: flex;
	  align-items: center;
	  padding: 0 40rpx;
	  margin: 0 20rpx;
	  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.1);
	  
	  .icon-search {
		font-size: 44rpx;
		color: #4080ff;
		margin-right: 20rpx;
	  }
	  
	  .search-input {
		flex: 1;
		height: 100%;
		font-size: 32rpx;
	  }
	  
	  .placeholder {
		color: #999;
	  }
	}
  }
  
  .content-section {
	padding: 24rpx;
	margin-top: -20rpx;
	
	.section-header {
	  margin: 20rpx 12rpx;
	  
	  .title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	  }
	}
  }
  
  .stock-list {
	background: #fff;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
	
	.stock-item {
	  display: flex;
	  align-items: center;
	  padding: 24rpx;
	  border-bottom: 1px solid #f5f5f5;
	  
	  &:last-child {
		border-bottom: none;
	  }
	  
	  .stock-info {
		flex: 1;
		
		.name {
		  font-size: 30rpx;
		  color: #333;
		  font-weight: 500;
		  margin-bottom: 4rpx;
		}
		
		.code {
		  font-size: 24rpx;
		  color: #999;
		}
	  }
	  
	  .patent-info {
		text-align: right;
		
		.count {
		  font-size: 32rpx;
		  color: #4080ff;
		  font-weight: 500;
		  margin-right: 4rpx;
		}
		
		.label {
		  font-size: 24rpx;
		  color: #999;
		}
	  }
	}
  }
  </style>